<script setup lang="ts">
	import { inject } from 'vue';
	import type { Log } from '@/env.d'
	import ViewerImgs from '@/components/Utils/Viewer/ViewerImgs.vue'
	import ViewerFiles from '@/components/Utils/Viewer/ViewerFiles.vue'
	import ViewerVideos from '@/components/Utils/Viewer/ViewerVideos.vue'

	const log = inject<Log>('log')!
	const isExpand = inject<boolean>('isExpand')!
</script>

<template>
	<!-- 图片和视频放在一起 -->
	<view class="block-media">
		<ViewerImgs v-if="log.imgs.length" />
		<ViewerVideos v-if="log.videos.length && isExpand" />
	</view>

	<view v-if="log.audios.length">音频：{{ log.audios }}</view>
	<ViewerFiles v-if="log.files.length">文件：{{ log.files }}</ViewerFiles>
</template>

<style scoped lang="scss">
	.block-media {
		--block-height: 5rem;
		--block-border-radius: 6px;
		--block-gap: 4rpx;

		display: flex;
		flex-wrap: wrap;
		gap: var(--block-gap);
	}

	// 空view应该不占用gap
	.block-media:empty {
		display: none;
	}
</style>